<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <link rel="stylesheet" href="vendor/github-markdown-css/github-markdown.css">
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
    body {
        font-family: 14px/1.5 arial, "source Han Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    }
    
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    input[type=file] {
        display: none;
    }
    /**
     * container style
     */
    
    html,
    body,
    .container-fuild,
    .folders,
    .articles,
    .editor {
        height: 100%;
        padding: 0;
        margin: 0;
        color: #E1E1E1;
        overflow: hidden;
    }
    
    .container-fuild {
        position: relative;
    }
    
    .editor {
        position: absolute;
        left: 460px;
        top: 0;
        right: 0;
    }
    
    .slimScrollDiv {
        height: 100%;
        overflow: hidden;
    }
    /**
     * list-group style
     */
    
    .list-group {
        /*padding: 10px;*/
    }
    
    .list-group-item {
        padding: 5px 6px;
        font-size: 14px;
        /*border-bottom: 1px solid #ddd;*/
    }
    
    .list-group-item:last-child {
        border-bottom: none;
    }
    /**
     * folders 样式
     */
    
    .folders {
        position: absolute;
        left: 0;
        top: 0;
        width: 180px;
        background: #1B1F1E;
        color: #ccc;
    }
    
    .folders .header {
        padding: 10px 6px;
    }
    
    .folders .list-group-item {
        cursor: pointer;
    }
    
    .folders .list-group-item.active {
        background: #262626;
    }
    
    .folders .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 6px;
        background: #1B1F1E;
    }
    
    .folders .footer a {
        color: #E1E1E1;
        padding: 4px 6px;
        display: inline-block;
    }
    /**
     * articles style
     */
    
    .articles {
        position: absolute;
        left: 180px;
        top: 0;
        width: 280px;
        background: #262626;
    }
    
    .articles .title,
    .articles .content,
    .articles .footer {
        padding: 0;
        margin: 0;
    }
    
    .articles .list-group-item {
        padding: 10px;
        border-bottom: 1px solid #393939;
    }
    /*.articles .list-group-item:last-child {
        border: none;
    }*/
    
    .articles .title {
        font-size: 14px;
        font-weight: normal;
    }
    
    .articles .content {
        font-size: 12px;
    }
    </style>
</head>

<body>
    <div class="container-fuild">
        <!--         <div class="folders" lm-folder="true">
            <div class="header">FOLDERS</div>
            <div class="slimScrollDiv">
                <ul class="list-group" lm-slimscroll="true">
                    <li class="list-group-item" ng-class="{active:$index==current}" ng-repeat="folder in folders track by $index" ng-bind="folder.name" ng-click="active($index)"></li>
                </ul>
            </div>
            <div class="footer">
                <input type="file" nwdirectory id="choosedir">
                <a href="javascript:;" ng-click="addFolder('#choosedir')">
                    <i class="iconfont">&#xe628;</i>
                </a>
                <a href="javascript:;" ng-click="delFolder()"><i class="iconfont">&#xe760;</i></a>
            </div>
        </div>
        <div class="articles" lm-article="true">
            <div class="header">
                <input type="text" placeholder="搜索">
            </div>
            <div class="slimScrollDiv">
                <ul class="list-group" lm-slimscroll="true">
                    <li class="list-group-item" ng-repeat="file as files">
                        <h3 class="title" ng-bind="file">Office文档内容提取方案Office文档内容提取方案</h3>
                        <p class="content">内容内容内容内容内容内容内容内容内容内容内容内容</p>
                        <p class="footer">2016-09-06 203KB</p>
                    </li>
                    <li class="list-group-item">
                        <h3 class="title">Office文档内容提取方案Office文档内容提取方案</h3>
                        <p class="content">内容内容内容内容内容内容内容内容内容内容内容内容</p>
                        <p class="footer">2016-09-06 203KB</p>
                    </li>
                    <li class="list-group-item">
                        <h3 class="title">Office文档内容提取方案Office文档内容提取方案</h3>
                        <p class="content">内容内容内容内容内容内容内容内容内容内容内容内容</p>
                        <p class="footer">2016-09-06 203KB</p>
                    </li>
                </ul>
            </div>
            <div class="footer">
            </div>
        </div> -->
        <div class="editor-box" lm-editor="true">
            <div class="slimScrollDiv editor">
                <div lm-slimscroll contenteditable="plaintext-only" ng-model="markcontent" spellcheck="false"></div>
            </div>
            <div class="slimScrollDiv preview">
                <div class="markdown-body" lm-slimscroll ng-bind-html="htmlcontent"></div>
            </div>
        </div>
    </div>
</body>
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular/angular-sanitize.min.js"></script>
<script src="vendor/marked/lib/marked.js"></script>
<!-- <script src="vendor/jquery-slimScroll/jquery.slimscroll.js"></script> -->
<script src="vendor/jquery-hotkeys/jquery.hotkeys.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/bootstrap.js"></script>

</html>
